<template>
  <div class="dialogTable">
    <el-drawer
      title="分组列表"
      :visible.sync="currentIsShow"
      size="60%"
      @close="closed"
    >
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="imgGroupName" label="分组名称" width="250">
        </el-table-column>
        <el-table-column prop="imgGroupCount" label="图片数量	" width="250">
        </el-table-column>
        <el-table-column label="操作" width="240">
          <template slot-scope="scope">
            <el-button
              type="text"
              style="color: #fc9e76;"
              size="small"
              @click="edit(scope.row)"
              >修改</el-button
            >

            <el-button
              type="text"
              style="color: #fc9e76;"
              size="small"
              @click="deleteData(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="10"
          :total="total"
        >
        </el-pagination>
      </div>
      <el-drawer
        title="编辑分组"
        :append-to-body="true"
        :visible.sync="innerDrawer"
      >
        <div class="container">
          <div style="font-size:14px;margin-bottom:10px;">
            <span style="color:red;">*</span>分组名称
          </div>
          <div style="margin-bottom:20px;">
            <el-input v-model="zoomName" placeholder="请输入内容"></el-input>
          </div>
          <el-button @click="innerDrawer = false">取 消</el-button>
          <el-button
            style="background-color:#fd804c;color: #fff;"
            @click="saveName"
            >保 存</el-button
          >
        </div>
      </el-drawer>
    </el-drawer>
    <el-dialog title="是否删除" :visible.sync="dialogVisibleDelete" width="30%">
      <div>
        <el-radio v-model="deleteModel" label="0"
          >删除分组，组内使用图片移到未分组</el-radio
        >
        <el-radio v-model="deleteModel" label="1"
          >删除分组，同时删除组内所有图片</el-radio
        >
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleDelete = false">取 消</el-button>
        <el-button
          style="background-color:#fd804c;color: #fff;"
          @click="deleteConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["isshow"],
  data() {
    return {
      tableData: [],
      currentIsShow: false,
      innerDrawer: false,
      zoomName: "",
      zoomId: "",
      dialogVisibleDelete: false,
      deleteModel: "",
      deleteZoomId: "",
      currentPage: 1,
      total: 0
    };
  },
  methods: {
    edit(data) {
      this.innerDrawer = true;
      this.zoomName = data.imgGroupName;
      this.zoomId = data.imgGroupId;
    },
    deleteData(data) {
      this.dialogVisibleDelete = true;
      this.deleteZoomId = data.imgGroupId;
    },
    closed() {
      this.$emit("changeTableDialog", false);
    },
    async saveName() {
      if (this.zoomName.length > 6) {
        this.$message.error("长度不能超过6个字符");
        return false;
      }
      const data = {
        imgGroupName: this.zoomName,
        imgGroupId: this.zoomId
      };
      await this.$http({
        url: "/cmsadmin/index/materialLibrary/updateMaterialGroupName",
        method: "post",
        data
      }).then(res => {
        this.innerDrawer = false;
        this.initData();
      });
    },
    async deleteConfirm() {
      if (!this.deleteModel) {
        this.$message.error("请选择删除模式");
        return false;
      }
      await this.$http({
        url: "/cmsadmin/index/materialLibrary/deleteMaterialLibraryGroup",
        method: "post",
        data: {
          isDeleteImg: this.deleteModel,
          imgGroupId: this.deleteZoomId
        }
      }).then(res => {
        this.$message.success("删除成功");
        setTimeout(() => {
          this.$router.go(0);
        }, 1500);
      });
    },
    initData() {
      this.$http({
        url: "/cmsadmin/index/materialLibrary/fetchMaterialLibraryGroupList",
        method: "get",
        params: {
          page: 1,
          size: 10
        }
      }).then(res => {
        const { list, pageNum, total } = res;
        this.tableData = list;
        this.tableData.forEach(item => {
          if (item.imgGroupCount == null) {
            item.imgGroupCount = 0;
          }
        });
        this.total = total;
        this.currentPage = pageNum;
      });
    },
    async handleCurrentChange() {
      // 页码修改
      await this.$http({
        url: "/cmsadmin/index/materialLibrary/fetchMaterialLibraryGroupList",
        method: "get",
        params: {
          page: this.currentPage,
          size: 10
        }
      }).then(res => {
        const { list, pageNum, total } = res;
        this.tableData = list;
        this.tableData.forEach(item => {
          if (item.imgGroupCount == null) {
            item.imgGroupCount = 0;
          }
        });
        this.total = total;
        this.currentPage = pageNum;
      });
    }
  },
  activated() {
    this.initData();
  },
  watch: {
    isshow: {
      handler(value) {
        this.currentIsShow = value;
      },
      immediate: true
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 0 20px;
}
/deep/ .el-drawer__header {
  font-size: 14px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 15px 20px 15px 0;
}
</style>
